<template>
	<view class="page">
		<u-navbar title="充值" :background="background" title-color="#fff" back-icon-color="#fff"></u-navbar>
		<view class="bg">
			<!-- <image src="../../static/images/walletBg.png" ></image> -->
			<view class="box">
				<view class="text">{{$t('当前余额')}}</view>
				<view class="balance"><span class="rmb">¥</span>{{money?money:'0.00'}}</view>
			</view>
		</view>
		<view class="payList">

		</view>
		<view class="button" @click="openPopup">{{$t('充值')}}</view>

		<uni-popup ref="popup" type="bottom">
			<view class="uni-padding-wrap">
				<view style="background:#FFF; padding:50upx 0;">
					<view class="uni-hello-text uni-center">{{$t('充值金额')}}</text></view>
					<view class="uni-h1 uni-center uni-common-mt">
						<text class="rmbLogo">{{$t('￥')}}</text>
						<input class="price" type="digit" :value="price" maxlength="6" @input="priceChange" />
					</view>
				</view>

				<view class="uni-btn-v uni-common-mt">
					<button class="paytype" @click="submitOrder" :loading="loading1">{{$t('确定')}}</button>
				</view>

			</view>
		</uni-popup>
		<pay-pop ref="payPop" :callbackUrl="'/pagesC/Wallet/recharge'" scene="recharge"
			:totalPrice="Number(price).toFixed(2)">
			<view class="pay-btn" @click="$u.throttle(crosspay,1500)">{{$t('确认支付')}}</view>
		</pay-pop>
	</view>

</template>

<script>
	let providerList = []; // 支付通道
	let orderInfoData = {};
	import payPop from "@/pagesC/components/payPop";
	import uniPopup from '../../components/uni-popup';
	export default {
		data() {
			return {
				active: 0,
				money: '',
				loading1: false,
				loading2: false,
				loading: false,
				price: 1,
				payData: '',
				wechatMiniProgram: 0,
				h5: 0,
				background: {
					backgroundImage: 'linear-gradient(to right, #ff4241, #ff5b5a)'
				}
			}
		},
		components: {
			uniPopup,
			payPop
		},

		onLoad() {
			//#ifdef MP-WEIXIN
			this.wechatMiniProgram = 1;
			//#endif
			//#ifdef H5
			this.h5 = 1;
			//#endif
		},
		onShow() {
			this.getWallet();
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: "/pagesC/wallet/rechargeList"
			});
		},
		methods: {
			openPopup() {
				this.loading1 = false;
				this.loading2 = false;
				this.$refs.popup.open();

			},
			priceChange(e) {
				this.price = e.detail.value;
				console.log(e.detail.value)
			},
			orderInfo(index) {
				return new Promise(reslove => {
					this.$http.getPrePayOrder({
						price: this.price
					}).then(res => {
						if (res.status == 200) {
							reslove(res);
							console.log(res)
							this.$refs.popup.close();
							this.$refs.payPop.payModel = true
						} else {
							this.$toast(res.mess);
						}
					});
				});
			},
			async submitOrder() {
				if (this.price <= 0) {
					this.$toast(this.$t('请输入充值金额'));
					return false;
				}
				orderInfoData = await this.orderInfo()
			},

			// 生成拉起支付的密钥
			payFall(paydata, zf_type) {
				console.log(paydata)
				let data = {
					order_number: paydata.data.order_number,
					zf_type: zf_type,
					wechat_miniprogram: this.wechatMiniProgram,
					h5: this.h5,
					scene: 'recharge'
				}
				if (this.wechatMiniProgram == 1) {
					data.xcx_openid = uni.getStorageSync('xcxOpenid')
				}
				return new Promise(resolve => {
					this.$http.getzhifu(data)
						.then(res2 => {
							console.log(res2)
							if (res2.status == 200) {
								resolve(res2);
							}
						});
				});
			},
			async crosspay() {
				let ref = this.$refs.payPop

				if (ref.payType == 5) { // 银行卡支付
					ref.orderNumber = orderInfoData.data.order_number
					ref.bankModel = true
					return
				} else if (ref.payType == 3) { // 余额支付
					ref.orderNumber = orderInfoData.data.order_number
					ref.hasPayPwd()
				} else { // 支付宝、微信支付
					const temp = await this.payFall(orderInfoData, ref.payType);
					ref.payinfos = await temp.data.infos
					ref.crosspay()
				}

				this.$hideLoading()
			},

			getWallet() {
				this.$http.getWallet().then(res => {
					if (res.status == 200) {
						this.money = res.data.money
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '~uview-ui/index.scss';

	.page {
		.bg {
			width: 750upx;
			height: 434upx;
			position: relative;
			background-image: linear-gradient(to right, #ff4241, #ff5b5a);

			image {
				width: 100%;
				height: 100%;
			}

			.box {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.text {
					line-height: 40upx;
					font-size: 35rpx;
				}

				.balance {
					font-size: 78upx;
					margin-top: 14upx;
				}

				.rmb {
					font-size: 50upx;
					margin-left: 10upx;
				}
			}
		}

		.payList {
			margin-top: 20upx;

			.payItem {
				display: flex;
				padding: 0 32upx;
				height: 100upx;
				background: #fff;
				border-bottom: 1upx solid #fbfbfb;
				justify-content: space-between;
				align-items: center;

				.label {
					display: flex;
					align-items: center;

					.icon {
						width: 38upx;
						height: 38upx;
						margin-right: 20upx;

						image {
							width: 100%;
							height: 100%;

						}
					}
				}
			}
		}

		.button {
			margin: 120upx 32upx 32upx;
			height: 88upx;
			font-size: 32upx;
			background-image: linear-gradient(to right, rgb(255, 164, 104), rgb(250, 63, 63));
		}

		.rmbLogo {
			font-size: 40upx;
		}

		button {
			background-color: #FB403F;
			border-radius: 50upx;

			color: #ffffff;
		}

		.uni-h1.uni-center {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: flex-end;
		}

		.price {
			border-bottom: 1px solid #eee;
			width: 200upx;
			height: 50upx;
			padding-bottom: 4upx;
			text-align: center;
		}

		.ipaPayBtn {
			margin-top: 30upx;
		}

		.paytype {
			margin-bottom: 15rpx;
			background-image: linear-gradient(to right, rgb(255, 164, 104), rgb(250, 63, 63));
		}

	}
</style>
